Vue之v

您所在的位置：网站首页 › vue v-on和v-bind › Vue之v

Vue之v

#Vue之v| 来源: 网络整理| 查看: 265

Vue之v-model双向绑定原理---kalrry 一、简介二、表单实现双向绑定1. 原理2. 实现三、组件上的双向绑定1. 原理2. 实现3. 实例

一、简介

v-model实现双向绑定的语法糖，常用于表单与组件之间的数据双向绑定.

二、表单实现双向绑定 1. 原理

分两步骤

v-bind绑定一个value属性v-on指令给当前元素绑定input事件

可看出v-model绑定在表单上时，v-model其实就是v-bind绑定value和v-on监听input事件的结合体

v-model = v-bind:value + v-on:input 2. 实现

用v-bind:value + v-on:input来模拟实现v-model

例子解释：

通过 v-bind:value 绑定 username 变量，每次输入内容的时候触发input事件通过事件对象参数 event.target.value 获得输入的内容，并且把这个内容赋值给username此时更改username时input输入框会变化，更改input输入框时username变量会变，从而实现了v-model的双向绑定功能三、组件上的双向绑定 1. 原理

v-model绑定在组件上的时候做了以下步骤

在父组件内给子组件标签添加 v-model ，其实就是给子组件绑定了 value 属性子组件内使用 prop 创建创建 value 属性可以拿到父组件传递下来的值，名字必须是 value。子组件内部更改 value 的时候，必须通过 $emit 派发一个 input 事件，并携最新的值v-model 会自动监听 input 事件，把接收到的最新的值同步赋值到 v-model 绑定的变量上 2. 实现

父组件操作

【本文地址】

Vue之v

Vue之v

今日新闻

推荐新闻